<template>
  <div class="login">
    <div :class="appType === '277' ? 'login_bg' : 'login_bg_cat'"></div>
    <div class="login_box">
      <div :class="appType === '277' ? 'login_username' : 'login_username_cat'">
        <input
          type="text"
          name="text"
          id="text"
          placeholder="请输入渠道ID"
          v-model="tgid"
        />
      </div>
      <div :class="appType === '277' ? 'login_password' : 'login_password_cat'">
        <input
          :type="inputType"
          name="password"
          id="password"
          placeholder="请输入密码"
          v-model="password"
        />
        <span class="open_close" @click="openClick">
          <img
            src="@/assets/img/login/icon_close.png"
            alt=""
            v-if="!this.show"
          />
          <img src="@/assets/img/login/icon_open.png" alt="" v-else />
        </span>
      </div>
      <div class="login_land" @click="landBtn" :style="{background: appType === '277' ? 'linear-gradient(-17deg, #2e3fea 0%, #4b6cf8 100%)' : 'linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)'}">登录</div>
      <p>无法登录,请联系对接专员</p>
    </div>
    <tips-popup/>
  </div>
</template>

<script>
import axios from "../../network/axios"
import qs from 'qs'
import TipsPopup from '../popup/tipsPopup.vue';
import {appType} from '../../assets/js/app'

export default {
  components: {
    TipsPopup,
  },
  data() {
    return {
      show: false,
      inputType: "password",
      tgid: "",
      password: "",
      appType: null,
    }
  },
  created () {
    this.appType = appType()
  },
  methods: {
    openClick() {
      if (this.show) {
        this.show = false
        this.inputType = "password"
      } else {
        this.show = true
        this.inputType = "text"
      }
    },
    landBtn() {
      const data = { 'tgid': this.tgid, 'password': this.password }
      axios({
        method: "post",
        url: "/login",
        data: qs.stringify(data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        if (res.state === "ok") {
          console.log(res)
          this.$cookies.set('tgid',res.data.tgid, '1d')
          this.$cookies.set('token',res.data.token, '1d')
          this.$store.commit('$_setTgid',res.data.tgid)
          this.$router.replace("/home")
        } else {
          this.$toast(res.msg)
        }
      })
    },
  },
};
</script>

<style scoped>
.login {
  background: #fff;
  height: 100vh;
}
.login_bg {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 640px;
  background: url("../../assets/img/login/login_bg.png") no-repeat;
  background-size: 100%;
}

.login_bg_cat {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 640px;
  background: url("../../assets/img/login/login_bg_cat_01.png") no-repeat;
  background-size: 100%;
}

.login_box {
  box-sizing: border-box;
  padding: 85px 39px 0;
  position: fixed;
  top: 50%;
  /* left: 50%; */
  transform: translateY(-50%);
  width: 636px;
  height: 618px;
  margin-left: 57px;
  background: #fff;
  box-shadow: 0px 14px 58px 0px rgba(223, 223, 223, 0.91);
  border-radius: 40px;
}

.login_box .login_username,
.login_box .login_password,
.login_box .login_username_cat,
.login_box .login_password_cat {
  position: relative;
  width: 558px;
  height: 88px;
  background: #f3f3f3;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.login_box input {
  outline: none;
  border: 0;
  background: #f3f3f3;
  margin-left: 85px;
  width: 400px;
  height: 70px;
}

.login_username::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../../assets/img/login/personal.png") no-repeat;
  background-size: 100%;
  left: 36px;
}

.login_username_cat::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../../assets/img/login/personal_cat.png") no-repeat;
  background-size: 100%;
  left: 36px;
}

.login_password::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../../assets/img/login/password.png") no-repeat;
  background-size: 100%;
  left: 36px;
}

.login_password_cat::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("../../assets/img/login/password_cat.png") no-repeat;
  background-size: 100%;
  left: 36px;
}

.login_password,
.login_password_cat {
  margin-top: 42px;
}

.open_close {
  position: absolute;
  right: 50px;
  width: 50px;
  height: 50px;
}

.open_close img {
  width: 100%;
  height: 100%;
}

.login_land {
  margin-top: 60px;
  width: 558px;
  height: 88px;
  /* background: linear-gradient(-17deg, #2e3fea 0%, #4b6cf8 100%); */
  border-radius: 44px;
  text-align: center;
  line-height: 88px;
  font-size: 34px;
  color: #fff;
  font-weight: bold;
}

p {
  font-size: 24px;
  font-weight: 500;
  color: #999999;
  margin-top: 27px;
  text-align: right;
}
</style>